<%@page import="java.util.*"%>
<%@page import="java.text.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%
    String path = request.getContextPath(); 
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+path+ "/"; 
%>
<!DOCTYPE HTML>
<html>
<head>
	<base href="<%=basePath%>">
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title>员工信息列表</title>
	<link rel="stylesheet" href="plugin/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/bootstrap-datetimepicker.css" />
    <link rel="stylesheet" href="plugin/bootstrap-table/dist/bootstrap-table.css">
<style type="text/css">
 
  .addbr{
     float: right;
    margin-right: 80px;
  }
  .pad{
    padding-left:15px;
    padding-top:10px;
  }
  .im{
     padding:10px;
  }
  .padtr{
      margin-top:5px;
  }
.btn1{
    margin-top: 10px;
}
input{
margin-top:5px;
}
select{
margin-top:5px;
}
</style>

</head>
<body>
    <div class="row base-margin" id="query">
        <ul class="breadcrumb">
				<li style="padding-left: 15px"><i class="icon-home home-icon"></i> <a href="javascript:void(0)">System Settings(系统设置)</a>
				</li>
				<li class="active">
				<a href="view/company/stauffUserList.jsp">Staff Information List(员工信息列表)</a></li>
        </ul>
        <form class="form-inline" role="form" style="float: left; width: 100%" method="post" id="queryForm">
           
           <div class="form-group">
                <label for="bName">&nbsp;---&nbsp;&nbsp;Name(员工姓名):</label> 
                <input type="text" class="form-control"  id="name"  >
            </div>   
              <div class="form-group">
                <label for="bName">Account(员工账号):</label> 
                <input type="text" class="form-control"id="account1"  >
            </div> 
           <div class="form-group">
                <label for="bName">Role(归属职位):</label> 
               <select id="pId" class="form-control"> </select>
            </div> 
            <div class="form-group">
                <button type="button" id="queryBtn" onclick="doQuery1('demo-table',queryParams1());" class="btn btn-primary">Search(搜索)</button>
            </div> 
             <a  href="javascript:void(0)" onclick='add()'>
	          <span class="glyphicon glyphicon-plus addbr">Add(添加员工)</span>
	        </a>
        </form>
    </div>
    <div class="container" style="width: 100%;margin-top:15px">
        <table id="demo-table">
        </table>
    </div>
</body>
	<!-- 加载需要的js -->
	<script src="js/jquery-3.2.1.min.js"></script>
	<script src="plugin/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	<script src="js/jquery-bootstrap-pagination.js"></script>
	<script src="plugin/bootstrap-table/dist/bootstrap-table.min.js"></script>
	<script src="plugin/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
	<script src="js/common.js"></script>
	<script src="plugin/layer/layer.js"></script>
	
	<script type="text/javascript" charset="utf-8">

	$(function () {
		initPath("<%=basePath%>");
	    initTable('demo-table',queryParams,columns,"sysUser/getList");
		initRole('pId');//初始化职位
	});
	
	function initRole(id){
		$.ajax({
            type: "get",
            url: "role/getList?pageNumber=0&pageSize=10000",
            dataType:"json",
            async:false,
            success: function(data){    
           	  console.log(data)
          	  if(data.code==200){	 
          		 $('#'+id+'').append("<option value=''>Tootal</option>");
          		 for(var i in data.data){
          			 $('#'+id+'').append("<option value='"+data.data[i].sysRoleId+"'>"+data.data[i].sysRoleName+"</option>");
          		 }
	        	 }else{
	        		  layer.msg(data.msg); 
	        	 }
       }
        }); 
	}
	

var  columns= [ { field: '', title: 'Serial Number(序号)',checkbox:true   },
	 { field : 'name',  title : 'Name(员工姓名)',  align : 'center', valign : 'middle' },
	  { field : 'account', title : 'Account(员工账号)', align : 'center', valign : 'middle'},
	  { field : 'password', title : 'Password(员工登录密码)', align : 'center', valign : 'middle'},
     { field : 'roleName', title : 'Role Name(职位名称)', align : 'center', valign : 'middle' },
     { field : 'sex', title : 'Gender(性别)', align : 'center', valign : 'middle', formatter:function(value, row, index){ 
    	var str=""; 
    	if(value==0){ 
    		str="male";
    		}else if(value==1){
    			str="female";
    			}else{
    				str= "other";
    				}
    	return str;	
     } },
     { field : 'telephone', title : 'Phone(电话号码)', align : 'center', valign : 'middle' },
     { field : 'idcard', title : 'ID card(身份证号)', align : 'center', valign : 'middle' },
     { field : 'email', title : 'Email(邮箱)', align : 'center', valign : 'middle' },
     {  field : 'upId',  title : 'Operator(操作员)', align : 'center', valign : 'middle', formatter: operateFormatter  }];//自定义方法，添加操作按钮 
	
	function operateFormatter(value, row, index) {//赋予的参数	
		console.log(row);
	if(row.jurisdiction==1){
		return [
			'<a    href="javascript:void(0)" onclick="add( \''+ row.id+ '\',\''+row.name+'\',\''+row.account+'\''
					+',\''+row.password+'\',\''+row.telephone+'\',\''+row.idcard+'\',\''+row.mail+'\',\''+row.roleId+'\',\''+row.sex+'\')" > Edit </a>',  
					'<span> &nbsp;&nbsp; </span>',
			'<a  href="javascript:void(0)" onclick="setdelect(\''+ row.id+ '\')" > Delete</a>',
			 '<span> &nbsp;&nbsp; </span>'
		].join('');
	}else{
		return [
			'<a    href="javascript:void(0)" onclick="add( \''+ row.id+ '\',\''+row.name+'\',\''+row.account+'\''
					+',\''+row.password+'\',\''+row.telephone+'\',\''+row.idcard+'\',\''+row.mail+'\',\''+row.roleId+'\',\''+row.sex+'\')" > Edit </a>',  
					'<span> &nbsp;&nbsp; </span>',
			'<a  href="javascript:void(0)" onclick="setdelect(\''+ row.id+ '\')" > Delete</a>',
			 '<span> &nbsp;&nbsp; </span>'
		].join('');
	}
		} 
	
	function add(id,name,account,sPassword,phone,idCard,email,pId,gender){
		var title="";var check="";var check1="";
		if(name==undefined){
			name="";sNo="";idCard="";email="";storeId="";pId="";idCard="";
			account="";sPassword="";phone="";gender="";email="";
			id="";
		}else{
			if(email!=null&&email!=""){
				email = email.split("@")[0];
			}
		}
		if(id==undefined){
			id="";
			title="Add(添加员工)";
			check="checked";
		}else{
			title="Update(修改员工)";	
			if(gender==2){
				check1="checked";
			}
		}
		layer.open({
			  type: 1,
			  title: title,
			  skin: 'layui-layer-rim', //加上边框
			  area: ['560px', '540px'], //宽高
			  content: ' <form id="add"><table>'+
                '<tr ><td class="pad">Name(员工姓名):</td> '+
                '<td><input type="text" class="form-control" name="name" id="name" value="'+name+'"  ></td>'+
                '<input type="hidden" name="id" id="id" value="'+id+'"/></td></tr>'+
                '</tr><tr ><td class="pad">Account(员工账号):</td> '+
                '<td><input type="text" class="form-control" name="account" id="sAccount" value="'+account+'"  disabled/></td>'+
                '</td></tr>'+
                '</tr><tr ><td class="pad">Password(登录密码):</td> '+
                '<td><input type="text" class="form-control"name="password"  id="sPassword"  value="'+sPassword+'" oninput="reg(\'sPassword1\',3)"/></td><td><span style="color:red;" id="sPassword1"></span></td>'+
                '</td></tr>'+
                '</tr><tr ><td class="pad">Role(归宿职位):</td> '+
                '<td><select id="pId1" name="roleId" class="form-control"></select></td>'+
                '</td></tr>'+
                '</tr><tr ><td class="pad">Gender(性别):</td> '+
                '<td><select id="gender1" name="sex" class="form-control" ><option value="0" '+check+'>male</option><option value="1" '+check1+'>female</option><option value="2" '+check1+'>other</option></select></td>'+
                '</td></tr>'+
                '</tr><tr ><td class="pad">Phone(电话号码):</td> '+
                '<td><input type="text" class="form-control"name="telephone"  id="telephone" value="'+phone+'" oninput="reg(\'regphone\',1)"  />'+
                '</td></tr>'+
                '</tr><tr ><td class="pad">Id number(身份证号):</td> '+
                '<td><input type="text" class="form-control" name="idcard" id="idCard" value="'+idCard+'"  /></td>'+
                '</td></tr>'+
                '</tr><tr ><td class="pad">Email(邮箱):</td> '+
                '<td><input type="text" class="form-control" name="mail" style="width:150px"  id="email" value="'+email+'" oninput="reg(\'regemail\',2)"  /><span style="position: fixed; margin-left: 164px; margin-top: -24px;">@</span></td><td><select  class="form-control" style="width:120px"id="emails"><option>qq.com</option><option>16c.com</option><option>sina.com</option></select></td><td><span style="color:red;" id="regemail"></span></td>'+
                '</td></tr>'+
                '<tr align="center" class="padtr"><td colspan="5">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+
                ' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+
                ' <button type="button" onclick="save()" class="btn btn-info btn1">&nbsp;Save&nbsp;&nbsp;</button>'+
                '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+
                '<button type="button" onclick="cacel()" class="btn btn-info btn1">&nbsp;&nbsp;Cancel&nbsp;&nbsp;</button></td></tr></table></form>'
			});
		initRole('pId1');//初始化职位
		if(id!=""){
			$('#pId1').val(pId);
		}
	}
	function cacel(){
		layer.closeAll();
	}
	//正则验证电话号码
function reg(id,type){
	var text=$('#phone').val();
	//对电子邮件的验证
      var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;

	   if(type==1){
		  
	   }else if(type==3){
		   var text=$('#sPassword').val();
		   if (text.length>5&&text.length<19) {
			   $('#'+id+'').html("");
		    	 $('#sPassword').css("border-color","#ccc")
		     } else {
		    	 $('#'+id+'').html("&nbsp;密码长度不合法");
			        $('#sPassword').css("border-color","#bd6767")
		    	 
		     }
	   }else{
		   var text1=$('#email').val()+"@"+$('#emails').val();
		   if (!myreg.test(text1)) {
		        $('#'+id+'').html("&nbsp;无效的邮箱");
		        $('#email').css("border-color","#bd6767")
		     } else {
		    	 $('#'+id+'').html("");
		    	 $('#email').css("border-color","#ccc")
		     } 
	   }
	}
	
	function queryParams(params) {
		 console.log(params);  
	    var param = {
	    		name:$('#name').val(),
	    		account:$('#account1').val(),
	    		roleId:$('#pId').val(),
	        pageNumber : this.pageNumber,
	        pageSize : this.pageSize
	    }	
	    return param;
	} 
	function queryParams1(){
		 var param = {
		    		name:$('#name').val(),
		    		account:$('#account1').val(),
		    		roleId:$('#pId').val(),
		        pageNumber : 1,
		        pageSize : this.pageSize
		    }	
		    return param;	
	}
			function  setdelect(id){		        
				var  flag =  confirm("Are you sure you want to delete?");				
				  if(flag){
						 $.ajax({
					            type: "get",
					            url: "sysUser/delete",
					            dataType:"json",
					            data:{"id":id},
					            success: function(data){    
					           	  console.log(data)
					          	  if(data.code==200){	 
					          		doQuery1('demo-table',queryParams1());
						        	 }else{
						        		  layer.msg(data.msg); 
						        	 }
					       }
					        }); 
				  }
				
			 }
			//保存
	function save(){
		//表单
		var data=serialize('add');
		 var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
		 data.mail = data.mail+"@"+$('#emails').val();
		 var text=$('#sPassword').val();
			   if (text.length<5&&text.length>19)  {
			    	 $('#sPassword1').html("&nbsp;密码长度不合法");
				        $('#sPassword').css("border-color","#bd6767")
			    	 return;
			     }
			   if(data.name==""||data.name==null){
				   alert("Name cannot be empty");
				   return;
			   }
			   if(data.roleId==""||data.roleId==null){
				   alert("Role cannot be empty");
				   return;
			   }
			   if(data.telephone==""||data.telephone==null){
				   alert("Phone cannot be empty");
				   return;
			   }
			   if(data.password==""||data.password==null){
				   alert("Password must be filled");
				   return;
			   }
			   
		console.log(data);
      		 $.ajax({
                   type: "post",
                   url: "sysUser/addOrUpdate",
                   data: JSON.stringify(data),
                   contentType:"application/json;charset=UTF-8", 
                   dataType:"json",
                   success: function(data){    	            	 
                  if(data.code==200){
                	  layer.msg("Successful");
                	  doQuery1('demo-table',queryParams1());
                	  layer.closeAll();
            	       }else{
            	    	    layer.msg(data.msg);
            	       }
                            }
               }); 
	}
			
			
	</script>
</html>


